<template>
	<div>
		<n-card :bordered="false" class="h-full rounded-8px shadow-sm">
			<n-space class="pb-12px" justify="space-between">
				<n-space>
					<n-button type="primary" @click="menuManagerRef.save()">
						<icon-ic-round-plus class="mr-4px text-10px"/>
						新增
					</n-button>
					<n-button @click="handlerDefaultExpandAll()">
						展开/折叠
					</n-button>
				</n-space>
			</n-space>

			<el-table
				:data="tableData"
				v-loading="loading"
				style="width: 100%; margin-bottom: 20px"
				row-key="menuId"
				border
				:key="treeKey"
				:default-expand-all="defaultExpandAll"
			>
				<el-table-column prop="menuName" label="菜单名称"/>
				<el-table-column prop="component" label="路由级别" align="center">
					<template #default="{row}">
						<n-tag v-if="row.component==='basic'" type="primary">一级路由</n-tag>
						<n-tag v-if="row.component==='self'" type="success">二级路由</n-tag>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="路由名称" align="center"/>
				<el-table-column prop="path" label="路由路径" align="center"/>
				<el-table-column prop="icon" label="图标" align="center"/>
				<el-table-column label="菜单类型" align="center">
					<template #default="{row}">
						<n-tag v-if="row.menuType===1" type="primary">菜单</n-tag>
						<n-tag v-if="row.menuType===2" type="success">权限</n-tag>
					</template>
				</el-table-column>
				<el-table-column label="路径权限">
					<template #default="{row}">
						<n-space v-if="row.urlPermission!==null && row.urlPermission!==''">{{
								row.methodType
							}}:{{ row.urlPermission }}
						</n-space>

					</template>
				</el-table-column>
				<el-table-column prop="btnPermission" label="按钮权限"/>
				<el-table-column prop="weight" label="排序" sortable/>
				<el-table-column prop="createTime" label="操作时间"/>
				<el-table-column label="操作">
					<template #default="{row}">
						<n-space>
							<n-button type="primary" text class="text-15px" @click="menuManagerRef.save(row)">
								<icon-ep-plus/>
								新增
							</n-button>
							<n-button type="primary" text class="text-15px" @click="menuManagerRef.edit(row)">
								<icon-ep-edit-pen/>
								编辑
							</n-button>
							<n-popconfirm
								@positive-click="confirmEvent(row.menuId)"
							>
								<template #trigger>

									<n-button type="error" text class="text-15px">
										<icon-ic-round-delete/>
										删除
									</n-button>
								</template>
								你确定要删除吗?
							</n-popconfirm>
						</n-space>
					</template>
				</el-table-column>
			</el-table>


		</n-card>
		<MenuManager ref="menuManagerRef" @fetch-data="initData" :initSelectData="tableData"/>
	</div>
</template>

<script setup>

import {reactive, toRefs, ref, onMounted} from "vue";
import {menuTable, deleteMenu} from '@/service';
import {useMessage} from 'naive-ui'
import MenuManager from './components/menuManager.vue'

const msg = useMessage()
const menuManagerRef = ref(null);

const state = reactive({
	loading: false,
	tableData: [],
	modalVisible: false,
	formModel: {},
	options: [],
	defaultExpandAll: true,
	treeKey: '',
	searchForm: {},
})
const
	{
		loading,
		tableData,
		title,
		options,
		treeKey,
		defaultExpandAll
	} = toRefs(state)


const handlerDefaultExpandAll = () => {
	//这个treeKey是用来处理 展开/关闭不生效的
	state.treeKey = +new Date();
	if (state.defaultExpandAll) {
		state.defaultExpandAll = false;
	} else {
		state.defaultExpandAll = true
	}
}

// 确认框删除
const confirmEvent = async (menuId) => {
	const {data} = await deleteMenu(menuId)
	if (data) {
		msg.success('删除成功')
	} else {
		msg.error('删除失败')
	}
	initData();

}


onMounted(() => {
	initData();
})

const initData = () => {
	state.loading = true
	setTimeout(async () => {
		const {data} = await menuTable(null, "-1");
		if (data) {
			state.tableData = data;
		} else {
			state.tableData = [];
		}
		state.loading = false;
	}, 1000)
}

</script>

<style scoped>

</style>
